import React from 'react';
import PropTypes from 'prop-types';
import {Card, Button, Row, Col, Table, Divider} from 'antd';
import {TABLE, DATE_FORMAT, DATETIME_FORMAT} from '../constants';
import {getDetail} from './api';
import {conventEnumValueToString, formatDateTime} from '../utils';
import {saleOrderType, saleOrderTransportType, currency, vehicleDeliveryOrderStatus} from '../Enum';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';
import routes from './routes';
const {Description} = DescriptionList;

export class DetailPanel extends React.PureComponent {
    state = {
        loading: false,
        data: {},
        details: [],
    };
    componentDidMount() {
        this.getDetailInfo();
    }
    getDetailInfo = () => {
        const id = this.props.id;
        this.setState({loading: true});
        getDetail(id)
            .then(res => {
                if(res.ok)
                    this.setState({
                        loading: false,
                        data: res.data,
                        details: res.data.details.map(d => Object.assign({}, d, {
                            order: res.data.details.findIndex(x => x.id === d.id) + 1,
                        })),
                    });
                    
                else
                    this.setState(({
                        loading: false
                    }));
            });
    }
    render() {
        const {data, details} = this.state;
        const {formatMessage} = this.props.intl;
        const columns = [{
            title: formatMessage({
                id: 'detailPanel.column.order',
                defaultMessage: '序号'
            }),
            dataIndex: 'order',
        }, {
            title: formatMessage({
                id: 'detailPanel.column.vin',
                defaultMessage: 'VIN'
            }),
            dataIndex: 'vin',
        }, {
            title: formatMessage({
                id: 'detailPanel.column.son',
                defaultMessage: 'SON号'
            }),
            dataIndex: 'son',
        }, {
            title: formatMessage({
                id: 'detailPanel.column.productCode',
                defaultMessage: '物料号'
            }),
            dataIndex: 'productCode',
        }, {
            title: formatMessage({
                id: 'detailPanel.column.productName',
                defaultMessage: '物料名称'
            }),
            dataIndex: 'productName',
        }, {
            title: formatMessage({
                id: 'detailPanel.column.accessoryItem',
                defaultMessage: '随车物品'
            }),
            dataIndex: 'accessoryItem',
        }];
        return (
            <div className="detail">
                <Card loading={this.state.loading}>
                    <DescriptionList size="large" title={<Row><Col span={12}>{
                        formatMessage({
                            id: 'detailPanel.card.title',
                            defaultMessage: '订单信息'
                        })
                    }</Col>
                    </Row>}>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.code',
                            defaultMessage: '交货单号',
                        })}>{data.code}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.brandName',
                            defaultMessage: '品牌',
                        })}>{data.brandName}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.dealerCode',
                            defaultMessage: '总代',
                        })}>({data.dealerCode}){data.dealerName}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.sapDeliveryCode',
                            defaultMessage: 'SAP交货单号',
                        })}>{data.sapDeliveryCode}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.saleConfirmationCode',
                            defaultMessage: '销售确认书号',
                        })}>{data.saleConfirmationCode}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.saleOrderCode',
                            defaultMessage: '销售订单号',
                        })}>{data.saleOrderCode}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.orderType',
                            defaultMessage: '订单类型',
                        })}>{conventEnumValueToString(saleOrderType, data.orderType)}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.transportType',
                            defaultMessage: '运输方式',
                        })}>{conventEnumValueToString(saleOrderTransportType, data.transportType)}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.currency',
                            defaultMessage: '币种',
                        })}>{conventEnumValueToString(currency, data.currency)}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.vehicleFundsTypeCode',
                            defaultMessage: '资金类型编号',
                        })}>{data.vehicleFundsTypeCode}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.logisticFactoryCode',
                            defaultMessage: '物流工厂编号',
                        })}>{data.logisticFactoryCode}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.address',
                            defaultMessage: '国内送达地址',
                        })}>{data.address}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.erpStorageLocation',
                            defaultMessage: '发货ERP地点',
                        })}>{data.erpStorageLocation}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.destERPStorageLocation',
                            defaultMessage: '收货ERP地点',
                        })}>{data.destERPStorageLocation}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.exportCountry',
                            defaultMessage: '出口国家',
                        })}>{data.exportCountry}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.receiveAddress',
                            defaultMessage: '收货地址',
                        })}>{data.receiveAddress}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.vesselName',
                            defaultMessage: '海船名',
                        })}>{data.vesselName}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.destinationPort',
                            defaultMessage: '目的港口',
                        })}>{data.destinationPort}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.contactName',
                            defaultMessage: '联系人',
                        })}>{data.contactName}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.vinYear',
                            defaultMessage: 'VIN码年份',
                        })}>{data.vinYear}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.status',
                            defaultMessage: '状态'
                        })}>{conventEnumValueToString(vehicleDeliveryOrderStatus, data.status)}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.remark',
                            defaultMessage: '备注',
                        })}>{data.remark}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.sapCreateDate',
                            defaultMessage: 'SAP创建日期',
                        })}>{formatDateTime(data.sapCreateDate, DATE_FORMAT)}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.sapCreateTime',
                            defaultMessage: 'SAP创建时间',
                        })}>{formatDateTime(data.sapCreateTime, DATETIME_FORMAT)}</Description>
                    </DescriptionList>
                    <Divider/>
                    <DescriptionList size="large" title={<Row><Col span={12}>{
                        formatMessage({
                            id: 'detailPanel.card.timeTitle',
                            defaultMessage: '基本信息'
                        })
                    }</Col>
                    </Row>}>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.creatorName',
                            defaultMessage: '创建人',
                        })}>{data.creatorName}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.createTime',
                            defaultMessage: '创建时间',
                        })}>{formatDateTime(data.createTime, DATETIME_FORMAT)}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.modifierName',
                            defaultMessage: '修改人',
                        })}>{data.modifierName}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.data.modifyTime',
                            defaultMessage: '修改时间',
                        })}>{formatDateTime(data.modifyTime, DATETIME_FORMAT)}</Description>
                    </DescriptionList>
                </Card>
                <Card>
                    <DescriptionList title={formatMessage({
                        id: 'detailPanel.table.details',
                        defaultMessage: '清单'
                    })}>
                        <Table
                            className="white-space-nowrap"
                            columns={columns}
                            rowKey="id"
                            pagination={false}
                            dataSource={details}
                            {...TABLE} />
                    </DescriptionList>
                </Card>
                <div className="page-toolbar">
                    <Button
                        type="primary"
                        disabled={this.state.loading}
                        onClick={this.props.onCancel}>{formatMessage({
                            id: 'detailPanel.btn.return',
                            defaultMessage: '返回'
                        })}</Button>
                </div>
            </div>
        );
    }
}

DetailPanel.propTypes = {
    id: PropTypes.string.isRequired,
    onCancel: PropTypes.func.isRequired,
    history: PropTypes.object,
    intl: PropTypes.object,
};

import {connect} from 'react-redux';
import {injectIntl} from './intl';
const mapStateToProps = (state, props) => ({
    id: props.id,
});
const mapDispatchToProps = (dispatch, props) => ({
    onCancel: () => {
        props.history.push(routes.query.url());
    },
});
export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(DetailPanel));
